<template>
  <div class="personal-collection">
    <a-card class="query" title="文件查询">
      <div class="input-box">
        <div class="item">
          <div class="text">文件名称</div>
          <a-input
            class="input"
            placeholder="请输入"
            v-model:value="formData.fileName"
          >
          </a-input>
        </div>
        <div class="item">
          <div class="text">创建人</div>
          <a-input
            class="input"
            placeholder="请输入"
            v-model:value="formData.createBy"
          >
          </a-input>
        </div>
        <div class="item">
          <a-button class="button" @click="clickReset">重置</a-button>
          <a-button type="primary" @click="clickQuery">查询</a-button>
        </div>
      </div>
    </a-card>
    <a-card class="list" title="收藏列表">
      <div class="list-box">
        <div class="item" v-for="item in personalCollectionList" :key="item.id">
          <CloudDownloadOutlined class="icon" @click="clickDownload(item)" />
          <div class="text">{{ item.fileName }}</div>
          <CloseCircleOutlined
            class="icon"
            @click="clickCancelCollection(item)"
          />
        </div>
      </div>
    </a-card>
  </div>
</template>
<script setup lang="ts">
  // 引入组件
  // 引入方法
  import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
  import {
    FolderOutlined,
    CloseCircleOutlined,
    CloudDownloadOutlined,
  } from '@ant-design/icons-vue'
  import commonMethod from '@/common-method/common-method'
  import api from '@/axios/api'
  import { message } from 'ant-design-vue'
  const props = defineProps({})
  const emits = defineEmits([])
  // 自定义状态
  const formData = ref({
    createBy: undefined,
    fileName: undefined,
  })
  const personalCollectionList = ref([])
  onMounted(() => {
    getPersonalCollection(formData.value)
  })
  // 自定义方法
  //获取个人收藏列表
  const getPersonalCollection = async data => {
    const res = await api.getPersonalCollection(data)
    console.log('获取个人收藏列表', res)
    personalCollectionList.value = res.data.data
  }
  //新增或移除个人收藏
  const addOrRemovePersonalCollections = async data => {
    const res = await api.addOrRemovePersonalCollections(data)
    console.log('新增或移除个人收藏', res)
    if (res.data.code === 200) {
      message.success('操作成功')
      getPersonalCollection(formData.value)
    } else {
      message.error('操作失败')
    }
  }
  //文件批量下载
  const batchDownloadFiles = async data => {
    const res = await api.batchDownloadFiles(data)
    console.log('文件批量下载', res)
    if (res.status === 200) {
      commonMethod.derive(res)
    } else {
      message.error(res.data.msg)
    }
  }
  //点击重置
  const clickReset = () => {
    formData.value = {
      createBy: undefined,
      fileName: undefined,
    }
    getPersonalCollection(formData.value)
  }
  //点击查询
  const clickQuery = () => {
    getPersonalCollection(formData.value)
  }
  //点击取消收藏
  const clickCancelCollection = item => {
    addOrRemovePersonalCollections({ id: item.id })
  }
  //点击下载
  const clickDownload = item => {
    batchDownloadFiles({
      fileIds: [item.fileId],
      fileName: item.fileName,
    })
  }
</script>
<style lang="less" scoped>
  .personal-collection {
    .query {
      margin-bottom: (20 / @vh);
      .input-box {
        display: flex;
        flex-wrap: wrap;
        gap: (20 / @vw);
        .item {
          display: flex;
          align-items: center;
          .text {
            margin-right: (10 / @vw);
            text-align: right;
          }
          .input {
            flex: 1;
          }
          .picker {
            width: (300 / @vw);
          }
          .button {
            margin-right: (10 / @vw);
          }
        }
        .item-time {
          width: 30%;
        }
      }
    }
    .list {
      .list-box {
        display: flex;
        flex-wrap: wrap;
        gap: (20 / @vw);
        width: 100%;
        .item {
          display: flex;
          align-items: center;
          gap: (20 / @vw);
          @width: (15 / @vw);
          width: calc(25% - @width);
          padding: (24 / @vh) (24 / @vw);
          // width: 25%;
          color: #3d3d3d;
          font-size: (16 / @vw);
          border: 1px solid rgba(0, 0, 0, 0.06);
          border-radius: (8 / @vw);
          cursor: pointer;
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
          &:hover {
            color: @tc;
            border-color: @tc;
          }
          .icon {
            font-size: (20 / @vw);
          }
          .text {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
</style>
